<template>
	<div>


		<el-container class="container">
			<el-main class="content">
				<img class="back" src="./img/icon_arrow_left.png" @click="$router.replace('/list/:cid')" />
				<div class="banner">
					<ul class="iconlogo">
						<li>
							<img :src="avatar.avatar" alt="">
						</li>
					</ul>
				</div>
				<div class="title">
					<div>
						<span class="title-mark">￥</span>
						<span class="title-price">{{ avatar.price }}</span>
					</div>
					<img src="./img/icon_product_unfavor.png" alt="" class="product" />
				</div>
				<div class="cont-brief">
					<div>
						<img src="./img/tag_self_new.png" alt="" style="width: 51px" />
						<span class="headinng">{{ avatar.name }}</span>
					</div>
					<span class="brief">{{ avatar.brief }}</span>
					<p style="color: rgb(133, 133, 133); font-size: 13px">
						小米电视选购指南<span
							style="color: rgb(153, 98, 26); font-size: 13px; line-height: 21px">至高24期免息,总有一款适合你>>></span>
					</p>
				</div>
				<div class="poster">
					<img src="./img/lingqv.png" alt="" style="width: 100%" />
				</div>
				<span style="
          background-color: white;
          line-height: 40px;
          color: rgb(188, 124, 0);
          font-size: 14px;
          font-weight: bold;
          text-align: center;
        ">商品介绍图</span>
				<div>
					<img :src="otherImgs[0]" alt="" width="100%" />
					<img :src="otherImgs[1]" alt="" width="100%" />
					<img :src="otherImgs[2]" alt="" width="100%" />
					<img :src="otherImgs[3]" alt="" width="100%" />
					<img :src="otherImgs[4]" alt="" width="100%" />
					<img :src="otherImgs[5]" alt="" width="100%" />
					<img :src="otherImgs[6]" alt="" width="100%" />
					<img :src="otherImgs[7]" alt="" width="100%" />
					<img :src="otherImgs[8]" alt="" width="100%" />
					<img :src="otherImgs[9]" alt="" width="100%" />
				</div>
			</el-main>
			<el-footer class="footer">
				<div class="shop">
					<img src="./img/mi_shop_icon.png" alt="" />
					<span>小米</span>
				</div>
				<div class="shop" @click="$router.push('/cart')">
					<img src="./img/icon_shop_cart.png" alt="" />
					<span>购物车</span>
				</div>
				<div class="pay">
					<div class="left" @click="isEdit = true">
						<span>加入购物车</span>
					</div>
					<div class="right">
						<span>立即购买</span>
					</div>
				</div>
			</el-footer>
			<div v-show="isEdit" @click.self="isEdit = false" class="detail">
				<div class="container">
					<div class="content2">
						<div class="avatar">
							<img :src="avatar.avatar">
							<img @click="isEdit = false" src="./close_circle_grey_new.png">
							<div class="avatar1">
								<span class="span1">{{ avatar.price }}</span>
								<span>{{ count + "件" }}</span>
							</div>
						</div>
						<div class="box2">
							<span>数量</span>
							<div>
								<button :disabled="count === 1" @click="count--">-</button>
								<span>{{ count }}</span>
								<button :disabled="count === 5" @click="count++">+</button>
							</div>
						</div>
					</div>
					<div class="footer">
						<button @click="add({ id, count })">确定</button>
					</div>
				</div>
			</div>
		</el-container>
		<div v-show="isEdit" @click.self="isEdit = false" class="detail">
			<div class="container">
				<div class="content2">
					<div class="avatar">
						<img :src="avatar.avatar">
						<img @click="isEdit = false" src="./close_circle_grey_new.png">
						<div class="avatar1">
							<span class="span1">{{ avatar.price }}</span>
							<span>{{ count + "件" }}</span>
						</div>
					</div>
					<div class="box2">
						<span>数量</span>
						<div>
							<button :disabled="count === 1" @click="count--">-</button>
							<span>{{ count }}</span>
							<button :disabled="count === 5" @click="count++">+</button>
						</div>
					</div>
				</div>
				<div class="footer">
					<button @click="addList({ id, count })">确定</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { CartApi, ProductApi, DetailsApi } from "../../api";

export default {
	name: "Detail",
	data() {
		return {
			search: {
				name: "",
				cid: parseInt(this.$route.params.params),
				orderCol: "price",
				orderDir: "asc",
				begin: 0,
				pageSize: 17
			},
			listModel: [],
			id: 1,
			count: 1,
			bannerImgs: [],
			otherImgs: [],
			activeId: 1,
			avatar: [],
			isEdit: false
		};
	},
	created() {
		this.activeId = this.$route.params.cid;
		this.getData();
		this.getdata();
	},

	methods: {
		async getData() {
			try {
				this.listModel = await DetailsApi.getMode(1); //获取当前id
				console.log(this.listModel)
			} catch (e) {
				/**/
			}
			this.otherImgs = this.listModel.otherImgs.split(",");

		},
		async getdata() {
			try {
				this.listModel = await ProductApi.getList(this.search);
				console.log(this.listModel)
				this.avatar = this.activeId > 0 ? this.listModel.find(item => item.id === parseInt(this.activeId)) : "";
				console.log(this.avatar)
			} catch (e) {/**/ }
		},
		async addList({ activeId, count }) {
			try {
				await this.$miConfirm("当前商品是否加入购物车?");
				console.log(activeId)
				const pid = this.activeId;
				await CartApi.add({ pid, count });
				this.$router.push('/cart')
			} catch (e) {/**/ }
		},

	},
};
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.content {
	flex-grow: 1;
	overflow: auto;
}

.back {
	width: 32px;
	height: 32px;
	position: absolute;
	top: 4px;
	left: 11px;
	z-index: 999;
}
.detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.3);

}

.detail > div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70vh;
  background-color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  animation-name: show;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

.avatar {
  padding: 13px 13px 24px 13px;
  display: flex;
  flex-direction: row;
}

.avatar img {
  width: 112px;
  height: 112px;
  background-color: #f4f4f4;
  border-radius: 10px;
}

.avatar img:nth-child(2) {
  width: 26.5px;
  height: 26.5px;
  background-color: white;
  position: absolute;
  right: 10px;
  top: 10px;

}

.avatar1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 13px;
  padding-right: 33px;
}

.avatar1 .span1 {
  color: #99621A;
  font-size: 29px;
}

.avatar span {
  color: #999999;
  font-size: 13px;
  margin-top: 9px;
}

.avatar .span1::before {
  content: '￥';
  font-size: 19px;
  color: #99621A;
}

.box2 {
  padding-left: 13px;
  padding-right: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.box2 > div {
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
}

.box2 > div span {
  text-align: center;
  display: inline-block;
  width: 40px;
  line-height: 30px;
  background-color: white;

}

.box2 > div button {
  width: 30px;
  background-color: transparent;
  border: none;
  font-weight: 600;
  font-size: 16px;
}

.box2 span {
  color: #333333;
  font-size: 15px;
  font-weight: 600;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.content2 {
  flex-grow: 1;
}



.footer button {
  background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
  color: white;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 24.5px;
  height: 45px;
  width: 100%;
  position: relative;
  top: -140%;
}
.banner {
	background-color: black;
}

.dialog-mask {
	z-index: 999;
}

.el-carousel__item img {
	width: 100%;
	height: 100%;
}

.title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-top: 9px;
	padding-left: 12px;
	padding-right: 5px;
	background: white;
}

.title-mark {
	color: rgb(153, 98, 26);
	font-size: 16px;
	font-weight: 500;
	position: relative;
	top: -2px;
}

.title-price {
	color: rgb(153, 98, 26);
	font-size: 26px;
	font-weight: 500;
	margin-left: 2px;
}

.product {
	width: 40px;
}

.headinng {
	color: rgb(51, 51, 51);
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
}

.cont-brief {
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	padding-left: 12px;
	padding-right: 5px;
	background: white;
}

.brief {
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	padding-left: 2px;
}

.cont-brief div:first-child {
	display: flex;
	align-items: center;
}

.poster {
	margin-top: 10px;
	height: 41.6667px;
	width: 375px;
}

.footer {
	flex-shrink: 0;
	height: 53px;
	border-top: 1px solid rgb(237, 237, 237);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.shop {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop img {
	width: 24px;
	height: 24px;
}

.shop span {
	color: rgb(48, 49, 51);
	font-size: 9px;
	font-weight: bold;
}

.pay {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	border-top-color: rgb(237, 237, 237);
	border-top-width: 1px;
	height: 53px;
	justify-content: space-between;
	position: relative;
}

.left {
	background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
	border-bottom-left-radius: 20px;
	border-top-left-radius: 20px;
	padding: 8px 28px;
}

.left span {
	color: rgb(255, 255, 255);
	font-size: 14px;
	font-weight: bold;
	margin-top: 0px;
	text-align: center;
}

.right {
	background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
	padding: 8px 28px;
}

.right span {
	color: rgb(255, 255, 255);
	font-size: 14px;
	font-weight: bold;
	margin-top: 0px;
	text-align: center;
}

.iconlogo {
	background-color: #ffffff;
}

.iconlogo li img {
	width: 100%;
}
</style>